
<template>
	<view class="fui-wrap">
		<view class="box" v-for="(item,index) in list" :key="index">
			<view class="top">
				<view class="img">
					<image :src="item.header" mode="widthFix" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="right">
					<view class="title">{{item.title}}</view>
					<view class="score score1">
						<block v-for="(list,i) in item.score" :key="i">
						<view :class="`list list-${i}`" v-if="i<3">
							<view>牛{{niu[i]}}：{{list.nickname}}</view>
							<view>{{list.score}}</view>
						</view>
						</block>
					</view>
				</view>
			</view>
			<view class="bottom">
				<fui-button type="warning" width="300rpx" height="80rpx" @click="play(item)">开始游戏</fui-button>
				<fui-button type="warning" width="300rpx" height="80rpx" @click="open(item)">查看排名</fui-button>
			</view>
		</view>
		<fui-landscape :show="paiming.show" :position="3" @close="paiming.show=false">
			<view class="pannel">
				<view class="title">{{paiming.item.title}} - 牛人榜</view>
				<view class="score score2">
					<view :class="`list list-${i}`" v-for="(list,i) in paiming.item.score" :key="i">
						<view><view style="display: inline-block;width: 60rpx;">牛{{niu[i]}}:</view>{{list.nickname}}</view>
						<view>{{list.score}}</view>
					</view>
				</view>
			</view>
		</fui-landscape>
		<fui-empty v-if="list.length===0" :src="`${baseUrl}assets/img/miniapp/empty.png`" title="暂无游戏!" :marginTop="200"></fui-empty>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	export default {
		data() {
			return {
				baseUrl:baseUrl,
				list:[],
				niu:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
				token:'',
				paiming:{
					show:false,
					item:''
				}
			}
		},
		onLoad(e) {
			this.$get('minigames/list').then(res=>{
				this.list=res.list;
				this.token=res.token;
			});
		},
		methods: {
			...methods,
			play:function(e){
				let url=e.url;
				if(this.token){
					url=url+'?token='+this.token;
				}
				url=encodeURIComponent(url);
				this.$navigateTo('index/webview?url='+url);
			},
			open:function(item){
				this.paiming.show=true;
				this.paiming.item=item;
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-wrap {
	
}
.box{
	padding: 20rpx;
	background-color: #fff;
	.top{
		display: flex;
	}
	.bottom{
		display: flex;
		margin-top: 20rpx;
		justify-content: space-between;
	}
	.img{
		border-radius: 16rpx;
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
	}
	.right{
		margin-left: 20rpx;
		width: 500rpx;
		.title{
			font-weight: bold;
			font-size: 32rpx;
		}
	}
}
.score{
	font-size: 24rpx;
	border: 1px dashed darkorange;
	margin-top: 10rpx;
	padding: 10rpx;
	.list{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.list-0{
		color: orangered;
	}
	.list-1{
		color: #e29700;
	}
	.list-2{
		color: #a9be4d;
	}
}
.score1{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 130rpx;
}
.score2{
	height: 500rpx;
	overflow-y: scroll;
}
.pannel{
	background-color: #fff;
	padding: 20rpx;
	width: 500rpx;
	.title{
		font-weight: bold;
		color: orangered;
	}
}
</style>